<script setup lang="ts">
import {useRouter} from 'vue-router'

const router = useRouter()
const onClickLeft = ()=>{
  // 每次访问页面, 应该有个容器 帮我们记录, 即使是反复重复访问,也不去重,直接记录
  // history
  if(props.back){
    return props.back()
  }
  if(history.state?.back){
    router.back()
  }else{
    router.push('/')
  }
}

  // 使用组建的时候 才能明确 标题 右侧字 和 行为 具体是什么
  // props

  const props = defineProps<{
    title?:string,
    rightText?:string,
    back?:()=>void
  }>()

  const  emit = defineEmits<{
    (e:'click-right'):void
  }>()

  const onClickRight = ()=>{
    emit('click-right')
  }

</script>

<template>
  <div class="pk-nav-bar-page">
    <van-nav-bar
    fixed
    left-arrow
    :title="title"
    :right-text="rightText"
    @click-left="onClickLeft"
    @click-right="onClickRight"
    ></van-nav-bar>
  </div>
</template>

<style lang="scss" scoped>
// 改变css解析时私有属性的样式 , 样式穿透不生效 :deep(){}
  :deep(){
    .van-nav-bar {
    //  & 指向外侧父元素的类名   与他拼接

      // .van-nav-bar .title
      // .title{}

      // van-nav-bar__arrow
      &__arrow {
        font-size: 18px;
        color:var(--pk-text1)
      }

      &__title {
          font-size: 15px;
      }
    }
  }

</style>





